import React, { Component } from 'react'
//1.引入header头部组件
import Header from '../../components/Header/Header'
//2.引入判断环境 渲染图片
import { $pre } from '../../http/http'

//3.引入自身样式
import './Shop.less'

//4.引入购物车接口
import { reqgetcartlist, reqgetcartdelete, reqgetcartedit } from '../../http/api'

//10.引入ant框架
import { Empty } from 'antd-mobile'

//11.引入图片
import yImg from '../../assets/img/n.jpeg'
import nImg from '../../assets/img/y.jpeg'


//5.创建类组件
export default class Shop extends Component {
    constructor() {
        super()
        //6.初始化数据
        this.state = {
            user: {
                uid: JSON.parse(localStorage.getItem('isLogin')).uid
            },
            //7.购物车列表
            shopList: [],

            //17.初始化全选按钮
            allcheck: false,

            //18.初始化商品总数
            sum: 0,
            //19.初始化商品总价
            sumPrice: 0

        }
    }
    //8.挂载完毕生命周期
    componentDidMount() {
        //1.一进来就发送购物车请求
        let { uid } = this.state.user
        console.log(uid);
        this.reqlist(uid)

    }

    //9.async,await请求 购物车列表
    async reqlist(uid) {
        const res = await reqgetcartlist({ uid })
        if (res.data.code == 200) {

            //16.1 给请求回来的数据都添加一个onecheck属性,添加完属性后再赋值 放在shopList赋值之前 
            res.data.list[1].content.forEach(item => {
                //16.2先找到选中的这条数据 使用arr.find方法  
                //主要就是查找页面中你点击的这条数据是后端返回给你一堆数据中的哪一条数据。返回符合条件的这一条数据。(find方法只返回符合条件的一条数据。)
                let obj = this.state.shopList.length > 0 ? this.state.shopList[1].content.find(i => i.id == item.id) : null
                item.onecheck = obj ? obj.onecheck : false //如果有obj再保留它身上的checkbox状态
            });

            this.setState({
                //10.渲染购物车页面
                shopList: res.data.list
            })
        }
    }


    //13.数量--
    async reducenum(item) {
        let data = {
            //购物车编号
            id: item.id,
            //操作类型 1减少 2增加
            type: 1,
            authorization: JSON.parse(localStorage.getItem('isLogin')).token
        }
        //15.限制减少范围 不能小于1
        if (item.num <= 1) {
            item.num = 1
            return
        }
        let res = await reqgetcartedit(data)
        if (res.data.code == 200) {
            //14.减少成功的时候再次发起请求购物车列表 渲染页面
            let { uid } = this.state.user;
            this.reqlist(uid)
        }
        console.log(item.num);
    }

    //15.数量++
    async addnum(item) {
        let data = {
            //购物车编号
            id: item.id,
            //操作类型 1减少 2增加
            type: 2,
            authorization: JSON.parse(localStorage.getItem('isLogin')).token
        }
        let res = await reqgetcartedit(data)
        if (res.data.code == 200) {
            //16.数量增加成功的时候再次发起请求购物车列表 渲染页面
            let { uid } = this.state.user;
            this.reqlist(uid)
        }
        console.log(item.num);
    }


    //附：react中的数据都在state中,state相当于vue中的data,想改变数据就从state中找
    //16.点击全选,选中所有按钮
    allcheck(e) { //16.1点击全选的时候 传入event事件,获取点击的信息 true和false

        //console.log(e);//输出e的值可以获取到点击按钮的true和false e.target.checked

        //16.2 让每一个按钮和全选按钮的值同步
        this.state.shopList[1].content.forEach(item => { //forEach直接改变原数组的checked属性
            item.onecheck = e.target.checked
        });
        //16.3react中修改了值还要放回去,不然实现不了页面渲染
        this.setState({
            shopList: this.state.shopList,
            allcheck: e.target.checked

        })

        //18.1触发计算数量
        this.sum()
        //19.1出发计算总价
        this.sumPrice()

    }

    //18选中全选计算商品总数
    sum() {
        let c = this.state.shopList[1].content.reduce((val, item) => (item.onecheck ? val + item.num : val), 0)
        console.log(c);
        this.setState({
            sum: c
        })

    }

    //19选中全选计算商品总价
    sumPrice() {
        let d = this.state.shopList[1].content.reduce((val, item) => (item.onecheck ? val + item.num * item.price : val), 0)
        console.log(d);
        this.setState({
            sumPrice: d
        })
    }

    //17.点击每一个按钮,选中全选按钮
    // onecheck(e, id) { //17.1点击全选的时候 传入event事件和id,通过event事件获取点击的信息 true和false,通过id选择点击的这条数据
    //     // console.log(e.target.checked);
    //     //17.1.通过id找到被点击的这条数据 a
    //     let a = this.state.shopList[1].content.find(item => item.id == id)

    //     //17.2将这条数据的复选框属性赋值成 event事件中本身有的e.target.checked的值
    //     a.onecheck = e.target.checked

    //     //17.3通过setState重新设置shopList的值
    //     this.setState({
    //         shopList: this.state.shopList
    //     })

    //     //17.4如果有一条没选中则全选按钮就不选中,用every方法,全选中返回true和有一条每选中false
    //     let b = this.state.shopList[1].content.every(item => item.onecheck) //返回true和false

    //     //17.5把every得出的结果赋值给allcheck  实现选中每一条后 全选按钮选中
    //     this.setState({
    //         allcheck: b
    //     })

    //     //18.1触发计算数量
    //     this.dsum()
    //     //19.1出发计算总价
    //     this.dsumPrice()
    // }



    //17.点击每一个按钮,选中全选按钮  自定义按钮 不需要传入event事件了 切换图片效果就可以
    onecheck(id) { //17.1点击全选的时候 传入event事件和id,通过event事件获取点击的信息 true和false,通过id选择点击的这条数据
        // console.log(e.target.checked);
        //17.1.通过id找到被点击的这条数据 a
        let a = this.state.shopList[1].content.find(item => item.id == id)

        // //17.2将这条数据的复选框属性赋值成 event事件中本身有的e.target.checked的值
        a.onecheck = !a.onecheck

        // //17.3通过setState重新设置shopList的值
        this.setState({
            shopList: this.state.shopList
        })

        //17.4如果有一条没选中则全选按钮就不选中,用every方法,全选中返回true和有一条每选中false
        let b = this.state.shopList[1].content.every(item => item.onecheck) //返回true和false

        //17.5把every得出的结果赋值给allcheck  实现选中每一条后 全选按钮选中
        this.setState({
            allcheck: b
        })

        //18.1触发计算数量
        this.dsum()
        //19.1出发计算总价
        this.dsumPrice()
    }


    //18选中单个按钮计算本条数据的数量
    dsum() {
        let c = this.state.shopList[1].content.reduce((val, item) => (item.onecheck ? val + item.num : val), 0)
        console.log(c);
        this.setState({
            sum: c
        })
    }

    //19选中单个按钮计算本条数据的价格
    dsumPrice() {
        let d = this.state.shopList[1].content.reduce((val, item) => (item.onecheck ? val + item.num * item.price : val), 0)
        console.log(d);
        this.setState({
            sumPrice: d
        })
    }

    render() {
        let { shopList, allcheck, sum, sumPrice } = this.state
        // 11.数组里面有两个对象,取到数组中下标为1的对象然后进行遍历
        // 但是由于异步请求,不确定shopList到底有没有请求回来,需要确定请求回来之后才进行取值。
        // console.log(shopList); 
        return (
            <div className='shop app'>
                {/* 标题 */}
                <Header title='购物车' back='back'></Header>
                {/* 遍历购物车 */}
                {/* 12.判断shopList数组的长度,避免异步产生的bug报错 */}
                {/* 判断的时候如果里面是很多标签需要在外面加一个根节点 */}
                {shopList.length > 0 ? (<div>
                    {shopList[1].content.map((item, index) => {
                        return (<div className="main" key={index}>
                            <img className='checkbox' src={item.onecheck ? nImg : yImg} alt="" onClick={() => {
                                //点击的时候传入id来判断点击的是哪条数据
                                this.onecheck(item.id)
                            }} />
                            {/* <input type="checkbox" checked={item.onecheck} onChange={(e) => this.onecheck(e, item.id)} /> */}
                            <div className="shangpin">
                                <img src={$pre + item.img} alt='' />
                                <div className="middle">
                                    <p className="title">{item.goodsname}</p>
                                    <p className="title">{item.price}元</p>
                                </div>
                                <div className="num">
                                    <button onClick={() => this.reducenum(item)}>-</button>
                                    <span className='num1'>{item.num}</span>
                                    <button onClick={() => this.addnum(item)}>+</button>
                                </div>
                            </div>
                        </div>)
                    })}
                </div>) : (<Empty description='商品为空' />)}

                {/* 合计计算 */}
                <div className="hejibg">
                    <div className="quanxuan">
                        <input type="checkbox" checked={allcheck} onChange={(e) => this.allcheck(e)} />
                        <span>全选</span>
                    </div>
                    <div className="heji">
                        <p>合计:￥{sumPrice.toFixed(2)}</p>
                        <p>不含运费,已优惠</p>
                        <p>￥0.00</p>
                    </div>
                    <div className="jiesuan">去结算({sum}件)></div>
                </div>
            </div>
        )
    }
}
